<template>
  <div>
    <el-row class="demo-autocomplete">
      <el-col :span="12">
        <el-col class="ctrlheigth" :span="20">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getUsersList"
          >
            <el-button slot="append" @click="handleSelect">搜索</el-button>
          </el-input>
        </el-col>
      </el-col>
      <el-col :span="12">
        <div class="ctrlheigth">
          <i class="i-style">EquipmentManagement</i>
          <el-button round @click="handleAdd">添加设备</el-button>
        </div>
      </el-col>
    </el-row>

    <el-table :data="currentPageData" border style="width: 100%">
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column
        prop="DeviceName"
        label="设备"
        width="150"
      ></el-table-column>
      <el-table-column prop="state" label="状态" width="230"> </el-table-column>
      <el-table-column prop="money" label="设备金额/元" width="220"></el-table-column>
      <el-table-column
        label="购买日期"
        width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{formatTime(scope.row.PurchaseDate)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="购入数量" width="200"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row._id)"
            type="text"
            size="small"
            >删除</el-button
          >
          <el-button type="text" @click="handleEdit(scope.row._id)" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: "",
        pageNum: 1, // 当前页数，默认为1
        pageSize: 5, // 每页显示数量
      },
      PMList: [], //所有数据
      currentPageData: [], //当前页显示内容
      total: 1, //页面所有条数
      FuzzyQuery: null,
      value: null,
      time:[],
    };
  },
  // 当第一次打开页面时会执行created生命周期
		created(){
			this.getUsersList()
		},
    computed:{
      formatTime() {
          return function(time) {
            let d = new Date(time);
            return `${d.getFullYear()}-${d.getMonth() +
              1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
          };
        },
    },
  methods: {
    //查询
    async getUsersList() {
      const {data:result} = await this.$http.get("EquipmentsList", {
          params: this.queryInfo,
        });
        if (!result.ret) return ("获取人事成员列表失败");
        this.PMList = result.data;
        this.currentPageData = result.data;
        //显示共多少条
        this.total  = this.PMList.length;
        this.handleSizeChange();
    },
    async handleSelect() {
      const getGrabbleValue = await this.$http.post("GrabbleEquipments", {
        params: this.queryInfo.query,
      });
      const data = getGrabbleValue.data.data.GrabbleUsername;
      if (data != "") {
        this.currentPageData = data;
      } else {
        alert("请输入有效用户名");
        this.currentPageData = this.PMList;
      }
    },
    //监听pageSize改变是事件
    handleSizeChange(newSize) {
      //获取当前页面共多少条信息
      if (newSize) {
        this.queryInfo.pageSize = newSize;
      } else {
        this.queryInfo.pageSize;
      }
      let begin = (this.queryInfo.pageNum - 1) * this.queryInfo.pageSize;
      let end = this.queryInfo.pageNum * this.queryInfo.pageSize;
      this.currentPageData = this.PMList.slice(begin, end);
    },
    //监听页码值改变是事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.handleSizeChange(this.pageSize);
    },
    // 跳转到添加数据的页面
    handleAdd() {
      this.$router.push("/EquipmentManagement-add");
    },
    handleEdit(id) {
      this.$router.push({ path: "/EquipmentManagement-edit", query: { id } });
    },
    async handleClick(id) {
      let confirm = await this.$confirm("正在删除", "提示", {
        type: "warning",
      }).catch((err) => err);
      if (confirm == "confirm") {
        // 如果点击确定
        //首先调用删除业务
        const { data: result } = await this.$http.delete("deleteEquipments", {
          data: { id },
        });
        if (result.errorCode !== 0) {
          return this.$confirm("删除失败");
        } else {
          this.$confirm("删除成功");
          await this.getUsersList();
        }
      }
    },
  },
};
</script>

<style>
.el-input-group__append {
  cursor: pointer;
}
.searchWidth {
  width: 400px;
  margin-top: 2%;
}
.i-style {
  margin-right: 10%;
}
.ctrlheigth {
  padding: 2%;
}
</style>
